<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2025-08-22 13:52:23
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-08-29 14:17:03
 * @FilePath: \register-pay-screen\src\components\screenLeftOne.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="screenLeftOne">
        <Title>
            <template #title>
                总体统计分析
            </template>
        </Title>
        <div class="listFlex">
            <div class="itemFlex">
                <div class="info">
                    <div class="content">
                        <CountTo :start="old_dataInfo.payment_total_amount" :end="dataInfo.payment_total_amount" :autoPlay="true"
                        :duration="1500" class="3" suffix="" />
                    </div>
                    <div class="num">缴费总额</div>
                </div>
                <div class="info">
                    <div class="content">
                        <CountTo :start="old_dataInfo.payment_total_count" :end="dataInfo.payment_total_count" :autoPlay="true"
                        :duration="1500" :decimals="0" class="3" suffix="" />
                    </div>
                    <div class="num">缴费总数</div>
                </div>
                <div class="info">
                    <div class="content">
                        <CountTo :start="old_dataInfo.payment_rate" :end="dataInfo.payment_rate" :autoPlay="true"
                        :duration="1500" class="3" suffix="%" />
                    </div>
                    <div class="num">总办理率</div>
                </div>
            </div>
            <div class="itemFlex">
                <div class="info">
                    <div class="content">
                        <CountTo :start="old_dataInfo.payment_newer_amount" :end="dataInfo.payment_newer_amount" :autoPlay="true"
                        :duration="1500" class="3" suffix="" />
                    </div>
                    <div class="num">新生缴费总额</div>
                </div>
                <div class="info">
                    <div class="content">
                        <CountTo :start="old_dataInfo.payment_newer_count" :end="dataInfo.payment_newer_count" :autoPlay="true"
                        :duration="1500" :decimals="0" class="3" suffix="" />
                    </div>
                    <div class="num">新生缴费数</div>
                </div>
                <div class="info">
                    <div class="content">
                        <CountTo :start="old_dataInfo.payment_newer_rate" :end="dataInfo.payment_newer_rate" :autoPlay="true"
                        :duration="1500" class="3" suffix="%" />
                    </div>
                    <div class="num">新生办理率</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { ElMessage } from 'element-plus'
import { paymentBIBase } from './Options/Api'
import { PiniaStore } from '../store/index'
const store = PiniaStore()
interface PropsType {
    startDate?: string
    endDate?: string
    verify_code?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    startDate: '',
    endDate: '',
    verify_code: ''
})
const dataInfo = ref<any>({})
const old_dataInfo = ref<any>({
    payment_total_amount: 0,
    payment_total_count: 0,
    payment_rate: 0,
    payment_newer_amount: 0,
    payment_newer_count: 0,
    payment_newer_rate: 0,
})
// 左边总数统计
const getList = async() => {
    const params: any = {
        start_date: props.startDate,
        end_date: props.endDate,
        verify_code: props.verify_code,
    }
    const res: any = await paymentBIBase(params)
    if (res.code !== 1) return ElMessage.error(res.msg)
    return new Promise((resolve) => {
        old_dataInfo.value = JSON.parse(JSON.stringify(dataInfo.value))
        // 同时也确保obj中的字段转换为数字类型后再赋值给dataDetails.value
        const numericObj: any = {}  
        for (const key in res.data) {
            if (res.data.hasOwnProperty(key)) {
            numericObj[key] = !isNaN(Number(res.data[key])) ? Number(res.data[key]) : res.data[key]
            }
        }
        dataInfo.value = numericObj
        store.setLoddingStatus()
        resolve(undefined) // 所有操作完成后resolve
    })
    
}
defineExpose({ getList })
</script>
<style scoped lang="scss">
.screenLeftOne {
    .listFlex {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .itemFlex {
        width: 100%; // 这里需要设置为100%，否则会超出父元素的宽度，导致布局异常
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 93px;
        padding-top:5px;
        .info {
            background: url('@/assets/images/date.png') no-repeat;
            background-size: 100% 100%;
            width: 129px;
            height: 93px;
            text-align: center;
            padding-top: 5px;
            .num {
                font-weight: 400;
                font-size: 16px;

            }

            .content {
                font-weight: bold;
                font-size: 20px;
                margin-bottom: 10px;
            }
        }

        .info:last-of-type {
            border-bottom: none;
        }
    }
    .itemFlex:last-of-type {
        margin-top: 14px;
    }
}
</style>
